﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Bing Maps Client Side Heat Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

  <!-- Use the excanvas control to add support for the HTML5 canvas element in IE7 and IE8 -->
  <!--[if lt IE 9]><script type="text/javascript" src="scripts/excanvas.min.js"></script><![endif]-->

  <!-- Load some data -->
  <script type="text/javascript" src="data/morrisonsdata.js"></script>
  <script type="text/javascript" src="data/waitrosedata.js"></script>
  <script type="text/javascript">
    var map;
    var heatmapLayer;
	  
    function GetMap() {
      map = new Microsoft.Maps.Map(document.getElementById("divMap"),
           { credentials: "YOUR_BING_MAPS_KEY",
             center: new Microsoft.Maps.Location(54.6, -4),
             mapTypeId: Microsoft.Maps.MapTypeId.aerial,
             labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
             zoom: 6
            });

      // Register and load the Client Side HeatMap Module
      Microsoft.Maps.registerModule("HeatMapModule", "script/heatmap.js");
      Microsoft.Maps.loadModule("HeatMapModule", { callback: function() {
        // Once the module is loaded, create a customised heatmap
        // by passing in various options as third parameter
        heatmapLayer = new HeatMapLayer(
          map,
          MorrisonsStores,
          { intensity: 0.65, // "heat" at centre of each point
            radius: 10000, // radius of affected area
            unit: "meters", // unit in which radius is measured
            colourgradient: {
              0.0: 'green',
              0.5: 'blue',
              1.0: 'white'
            }
          });
      }});
    }
  </script>
</head>
<body onload="GetMap();">
<p>This page demonstrates a customised Bing Maps heatmap layer displaying
the locations of Morrisons and Watirose supermarkets with a custom colour gradient.
Click to select different datasets</p>
  <button onclick="heatmapLayer.SetPoints(MorrisonsStores);">Morrisons</button>
  <button onclick="heatmapLayer.SetPoints(WaitroseStores);">Waitrose</button>
  <button onclick="heatmapLayer.Remove();">Clear</button>
    <div id="divMap" style="position:relative; width:720px; height:480px;"></div>
</body>
</html>
